const stateClassMap = {
  correct: {
    className: 'quiz-option--correct',
    icon: 'state-correct'
  },
  incorrect: {
    className: 'quiz-option--incorrect',
    icon: 'state-incorrect'
  }
};

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    value: {
      type: String,
      value: ''
    },
    text: {
      type: String,
      value: ''
    },
    description: {
      type: String,
      value: ''
    },
    label: {
      type: String,
      value: ''
    },
    checked: {
      type: Boolean,
      value: false
    },
    disabled: {
      type: Boolean,
      value: false
    },
    state: {
      type: String,
      value: ''
    }
  },

  data: {
    stateClass: '',
    stateIcon: ''
  },

  lifetimes: {
    attached() {
      this.updateState();
    }
  },

  observers: {
    state() {
      this.updateState();
    }
  },

  methods: {
    updateState() {
      const stateInfo = stateClassMap[this.properties.state] || { className: '', icon: '' };
      this.setData({
        stateClass: stateInfo.className,
        stateIcon: stateInfo.icon
      });
    },

    handleTap() {
      if (this.properties.disabled) {
        return;
      }
      this.triggerEvent('toggle', { value: this.properties.value });
    }
  }
});
